<script>
import vocabularyDetail from "@/components/vocabularyDetail.vue"

export default {
  name: "phrasesSynosRels",
  props: {
    phrasesList: {
      type: Array,
      default: [],
    },
    synosList: {
      type: Array,
      default: [],
    },
    relsList: {
      type: Array,
      default: [],
    },
  },
  components: { vocabularyDetail },
  data() {
    return {
      tabList: [
        {
          value: "phrasesList",
          label: "短语",
        },
        {
          value: "synosList",
          label: "同义词",
        },
        {
          value: "relsList",
          label: "同根词",
        },
      ],
      currentSelectTab: "",
    }
  },
  computed: {
    filteredTabList() {
      const filteredTabList = this.tabList.filter((item) => this[item.value] && this[item.value].length > 0)
      // 选择第一个tab
      if (filteredTabList && filteredTabList.length > 0) {
        this.currentSelectTab = filteredTabList[0].value
      }
      return filteredTabList
    },
  },
}
</script>

<template>
  <view class="component" v-if="filteredTabList && filteredTabList.length > 0">
    <view class="tab-list">
      <block v-for="item in filteredTabList" :key="item.value">
        <view class="tab-item" :class="{ active: currentSelectTab === item.value }" @click="currentSelectTab = item.value">{{
          item.label
        }}</view>
      </block>
    </view>
    <!--		短语-->
    <view class="phrases-list" v-if="currentSelectTab === 'phrasesList'">
      <view class="item" v-for="(item, index) in phrasesList" :key="index">
        <!--				短语内容-->
        <view class="pcontent">{{ item.pcontent }}</view>
        <!--				短语中文翻译-->
        <view class="pcn">{{ item.pcn }}</view>
      </view>
    </view>
    <!--		同义词-->
    <view class="synos-list" v-else-if="currentSelectTab === 'synosList'">
      <view class="item" v-for="(item, index) in synosList" :key="index">
        <!--				词性-->
        <view class="pos">{{ item.pos }}</view>
        <view class="trans-word-list">
          <!--					翻译-->
          <text class="trans">{{ item.tran }}</text>
          <!--				单词列表-->
          <view class="word-list">
            <view class="item" v-for="(word, index) in item.hwds" :key="word.w">
              <text class="word" @click="() => $refs.vocabularyDetail.open(word.w)">{{ word.w }}</text>
              <text style="margin: 0 10rpx" v-if="index !== item.hwds.length - 1">/</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!--		词性-->
    <view class="rels-list" v-else-if="currentSelectTab === 'relsList'">
      <view class="item" v-for="(item, index) in relsList" :key="index">
        <!--			词性-->
        <view class="pos">{{ item.pos }}</view>
        <!--				词性单词-->
        <view class="word-list">
          <view class="word-item" v-for="(word, index) in item.words" :key="index">
            <!--						单词原文-->
            <view class="hwd">{{ word.hwd }}</view>
            <!--						单词翻译-->
            <view class="tran">{{ word.tran }}</view>
          </view>
        </view>
      </view>
    </view>

    <vocabularyDetail ref="vocabularyDetail"></vocabularyDetail>
  </view>
</template>

<style scoped lang="scss">
.component {
  border: 2rpx solid var(--border-color);
  padding: 30rpx;
  border-radius: 20rpx;
  > .tab-list {
    display: flex;
    > .tab-item {
      font-size: 28rpx;
      color: var(--text-color-light);
      padding: 10rpx 30rpx;
      background: var(--theme-color-light);
      margin-right: 30rpx;
      border-radius: 29rpx;
      &.active {
        background: var(--theme-color);
        color: white;
      }
    }
  }
  > .phrases-list {
    > .item {
      margin-top: 30rpx;
      > .pcontent {
        font-size: 30rpx;
        color: var(--text-color);
      }
      > .pcn {
        font-size: 28rpx;
        color: var(--text-color-light);
        margin-top: 10rpx;
      }
    }
  }
  > .synos-list {
    margin-top: 30rpx;
    > .item {
      display: flex;
      &:not(:first-child) {
        padding-top: 20rpx;
      }
      &:not(:last-child) {
        border-bottom: 2rpx solid var(--border-color);
        padding-bottom: 20rpx;
      }
      > .pos {
        font-size: 30rpx;
        font-weight: bold;
      }
      > .trans-word-list {
        width: 0;
        flex: 1;
        margin-left: 20rpx;
        font-size: 30rpx;
        > .trans {
          color: var(--text-color-light);
        }
        > .word-list {
          margin-top: 20rpx;
          display: flex;
          color: var(--text-color-light);
          flex-wrap: wrap;
          > .item {
            > .word {
              color: var(--text-color-theme);
              font-weight: bold;
            }
          }
        }
      }
    }
  }
  > .rels-list {
    margin-top: 30rpx;
    > .item {
      display: flex;
      &:not(:first-child) {
        padding-top: 20rpx;
      }
      &:not(:last-child) {
        border-bottom: 2rpx solid var(--border-color);
        padding-bottom: 20rpx;
      }
      > .pos {
        font-size: 30rpx;
        font-weight: bold;
      }
      > .word-list {
        width: 0;
        flex: 1;
        margin-left: 20rpx;
        > .word-item {
          &:not(:first-child) {
            margin-top: 20rpx;
          }
          > .hwd {
            font-size: 30rpx;
          }
          > .tran {
            font-size: 28rpx;
            color: var(--text-color-light);
            margin-top: 10rpx;
          }
        }
      }
    }
  }
}
</style>
